<template>
	<div class="room-detail-header fix">
		<div class="room-detail-header-left fl">
			<div class="room-detail-header-left-wrap">
				<div class="speaker-name-wrap">
					<span class="approve-name" v-if="roompara.room_qualification === '1'">实名</span>
					<span class="approve-name" v-else-if="roompara.room_qualification === '2'">认证</span>
					<span class="speak-name" v-if="!speaker">等待直播</span>
					<span class="speak-name" v-else>{{speaker}}</span>
				</div>
				<div class="room-hot-wrap">
					<i class="icon-room-hot"></i>
					<span class="detail-room-hot">{{allCount}}</span>
				</div>
			</div>
		</div>
		<div class="room-detail-header-right fr">
			<div class="room-detail-header-right-wrap">
				<div class="detail-user-name-wrap">
					<span class="detail-user-name">{{user.username}}</span>
<!-- 					<router-link to="/login" v-if="!user.logined" class="login-out-a">登录</router-link>
					<a href="javascript:;" @click="loginOut" class="login-out-a" v-else>退出</a> -->
				</div>
				<div class="detail-refresh-wrap">
					<span @click="refresh">刷新</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		name:"roomHeader",
		inject:['reload'],
		computed:{
			...mapGetters([
			  'user',
				'allCount',
				'speaker',
				'roomLive',
				'roompara'
			])
		},
		methods:{
			loginOut(){
				this.$store.dispatch('LogOut').then(res=>{
					location.reload()
				}).catch(err=>{
					console.log(err)
				})
			},
			refresh(){
				this.reload()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.room-detail-header{
		padding:10px 14px;
		box-sizing: border-box;
		background-color: rgba(91,91,91,.4);
		font-size: 14px;
		color: #fff;
		.room-detail-header-left{
			.room-detail-header-left-wrap{
				.speaker-name-wrap{
					position: relative;
					padding: 2px 5px 5px;
					&::after{
						content: '';
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						height: 1px;
						background-color: rgba(255,255,255,.15);
					}
					.approve-name{
						margin-right: 5px;
					}
				}
				.room-hot-wrap{
					padding-top: 5px;
					text-align: center;
					.icon-room-hot{
						display: inline-block;
						width: 16px;
						height: 16px;
						background: url(../../assets/images/icon-room-hot.png) no-repeat;
						background-size: contain;
						vertical-align: -2px;
						margin: 0 8px 0 0;
					}
				}
			}
		}
		.room-detail-header-right{
			.room-detail-header-right-wrap{
				.detail-user-name-wrap{
					margin-bottom: 5px;
					.detail-user-name{
						margin-right: 20px;
					}
					.login-out-a{
						position: relative;
						&::after{
							content: '';
							position: absolute;
							top: 4px;
							bottom: 0;
							left: -10px;
							height: 14px;
							width: 1px;
							background-color: rgba(255,255,255,.9);
						}
					}
				}
				.detail-refresh-wrap{
					text-align: right;
				}
			}
		}
	}
</style>
